<template>
    <div class="common-layout">
        <el-container>
            <el-main>
                <el-form label-width="120px" class="demo-ruleForm" v-model="user">
                    <el-form-item label="用户名">
                        <el-input type="text" v-model="username" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="userpassword" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="tologin">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router";

const router = useRouter();

const username = ref()
const userpassword = ref()

function tologin() {
    // 收集用户信息
    const uname = username.value
    const upsw = userpassword.value

    // 创建Ajax
    const xhr = new XMLHttpRequest()

    // 配置 ajax 请求地址与请求方式
    xhr.open('POST', 'http://121.89.205.189:3000/admin/admin/login')

    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

    //发送请求
    xhr.send(`adminname=${uname}&password=${upsw}`)

    xhr.onload = function () {

        const res = JSON.parse(xhr.responseText)

        if (res.code !== '200') return alert(res.message)

        alert(res.message + ',点击确定跳转首页')

        router.push("/");
    }
    // router.push("/");
}
</script>

<style lang="scss" scoped>
.common-layout {
    height: 100%;

    .el-container {
        height: 100%;

        .el-main {
            background-color: rgb(236, 245, 255);

            .el-form {
                width: 400px;
                height: 400px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: center;
                border-radius: 20px;
                border: 1px solid rgb(198, 226, 255);
                background-color: rgba(198, 226, 255, 0.5);
                margin: 50px auto;

                .el-form-item {
                    margin-bottom: 50px;
                    width: 320px;

                    .el-button {
                        margin-left: 140px;
                        width: 200px;
                    }
                }
            }

        }
    }
}
</style>